<template>
  <div class="study-room-page">
    <div class="header">
      <el-icon size="32" color="#409eff"><OfficeBuilding /></el-icon>
      <h2>自习室管理</h2>
      <!-- <el-button type="primary" @click="showCreateDialog = true">新建自习室</el-button> -->
    </div>
  </div>
   <el-card style="width: 70%;margin-left: 15%;height: 85%;">
   <el-form
    ref="settingForm"
    :model="formData"
    :rules="formRules"
    label-width="120px"
    class="setting-form"
  >
    <!-- ID（一般由后端生成，这里做展示/不可编辑） -->
    <el-form-item label="配置ID" prop="id">
      <el-input v-model="formData.id" disabled placeholder="系统生成" />
    </el-form-item>

    <!-- 最大人数 -->
    <el-form-item label="最大人数" prop="maxSeat">
      <el-input-number
        v-model="formData.maxSeat"
        :min="1"
        :max="999"
        placeholder="请输入最大人数"
      />
    </el-form-item>

    <!-- 自动关闭分钟（过期时间） -->
    <el-form-item label="自动关闭分钟" prop="autoCloseMin">
      <el-input
        v-model="formData.autoCloseMin"
        placeholder="例如:3分钟"
      />
    </el-form-item>

    <!-- 摄像头开关 -->
    <el-form-item label="摄像头开关" prop="isCamera">
      <el-switch
        v-model="formData.isCamera"
        :active-value="1"
        :inactive-value="0"
        active-text="开启"
        inactive-text="关闭"
      />
    </el-form-item>

    <!-- 麦克风开关 -->
    <el-form-item label="麦克风开关" prop="isMic">
      <el-switch
        v-model="formData.isMic"
        :active-value="1"
        :inactive-value="0"
        active-text="开启"
        inactive-text="关闭"
      />
    </el-form-item>

    <!-- 屏幕共享开关 -->
    <el-form-item label="屏幕共享开关" prop="isScreenShare">
      <el-switch
        v-model="formData.isScreenShare"
        :active-value="1"
        :inactive-value="0"
        active-text="开启"
        inactive-text="关闭"
      />
    </el-form-item>

    <!-- 创建者（一般由系统赋值，不可编辑） -->
    <!-- <el-form-item label="创建者" prop="creator">
      <el-input v-model="formData.creator" disabled  />
    </el-form-item> -->

    <!-- 创建时间（一般由系统赋值，不可编辑） -->
    <!-- <el-form-item label="创建时间" prop="createTime">
      <el-input v-model="formData.createTime" disabled  />
    </el-form-item> -->

    <!-- 修改人 -->
    <!-- <el-form-item label="修改人" prop="updater">
      <el-input v-model="formData.updater" placeholder="请输入修改人" />
    </el-form-item> -->

    <!-- 修改时间（一般由系统赋值，可做展示） -->
    <!-- <el-form-item label="修改时间" prop="updateTime">
      <el-input v-model="formData.updateTime" disabled />
    </el-form-item> -->

    <!-- 操作按钮 -->
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存设置</el-button>
      <el-button @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>
  </el-card>
</template>

<script setup >
import { ref,onMounted,reactive } from "vue";
import { OfficeBuilding } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

import { updateRoom } from "../../api/user";
import { selectRoomConfig } from "../../api/user";

// 表单数据
const formData = reactive({
  // id: '', // 配置ID（示例空值，实际根据业务填充）
  // maxSeat: 0, // 最大人数
  // autoCloseMin: '', // 自动关闭分钟
  // isCamera: 0, // 摄像头开关：0关闭，1开启
  // isMic: 0, // 麦克风开关：0关闭，1开启
  // isScreenShare: 0, // 屏幕共享开关：0关闭，1开启
  // creator: '', // 创建者
  // createTime: '', // 创建时间
  // updater: '', // 修改人
  // updateTime: '' // 修改时间
})

// 表单校验规则
const formRules = {
  maxSeat: [
    { required: true, message: '请输入最大人数', trigger: 'blur' },
    { type: 'number', message: '必须为数字', trigger: 'blur' }
  ],
  autoCloseMin: [
    { required: true, message: '请输入自动关闭分钟', trigger: 'blur' }
  ],
  updater: [
    { required: true, message: '请输入修改人信息', trigger: 'blur' }
  ]
}

// 表单引用
const settingForm = ref(null)

// 提交表单
const onSubmit =async () => {

 try {
    // 正确调用验证方法并等待结果
    await settingForm.value.validate();
    
    // 验证通过，执行提交
    const res = await updateRoom({ ...formData });
    console.log("响应数据:", res);
    
    if (res.code === 200) {
      ElMessage.success(res.msg || "操作成功");
    } else {
      ElMessage.error(res.msg || "操作失败");
    }
  } catch (error) {
    // 验证失败时会进入这里
    console.log("验证错误:", error);
    ElMessage.error("请填写完整信息");
  }

}

// 重置表单
const onReset = () => {
  settingForm.value.resetFields()
}
// 查找自习室配置信息
const findRoomConfig =async () => {
  const res= await selectRoomConfig({

  })
  console.log(res);  
    formData.updater= res.data.updater;
    formData.createTime= res.data.createTime;
    formData.updateTime= res.data.updateTime;
    formData.id= res.data.id;
    formData.maxSeat= res.data.maxSeat;
    formData.autoCloseMin= res.data.autoCloseMin;
    formData.isCamera= res.data.isCamera;
    formData.isMic= res.data.isMic;
    formData.isScreenShare= res.data.isScreenShare;
    formData.creator= res.data.creator;

  
 
}

//页面加载时获取自习室配置信息
onMounted(()=>{
  findRoomConfig();
})
</script>

<style scoped>
.setting-form {
  width: 600px;
  margin: 50px auto;
}
</style>